// 设计稿尺寸
const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080;

/**
 * px 转 vw
 * @param px - 像素值
 * @param designWidth - 设计稿宽度，默认 1920
 * @returns vw 字符串
 */
export const px2vw = (px: number, designWidth: number = DESIGN_WIDTH): string => {
  return `${(px / designWidth) * 100}vw`;
};

/**
 * px 转 vh
 * @param px - 像素值
 * @param designHeight - 设计稿高度，默认 1080
 * @returns vh 字符串
 */
export const px2vh = (px: number, designHeight: number = DESIGN_HEIGHT): string => {
  return `${(px / designHeight) * 100}vh`;
};

/**
 * px 转 rem（可选，基于根元素字体大小）
 * @param px - 像素值
 * @param baseFontSize - 根字体大小，默认 16
 * @returns rem 字符串
 */
export const px2rem = (px: number, baseFontSize: number = 16): string => {
  return `${px / baseFontSize}rem`;
};

/**
 * 响应式样式对象转换
 * 自动将数字值转换为 vw
 */
export const responsive = (styles: Record<string, any>, useVh: string[] = []): React.CSSProperties => {
  const result: any = {};
  
  for (const [key, value] of Object.entries(styles)) {
    if (typeof value === 'number') {
      // 判断是否应该使用 vh
      const shouldUseVh = useVh.includes(key) || 
                          key.toLowerCase().includes('height') || 
                          key.toLowerCase().includes('top') || 
                          key.toLowerCase().includes('bottom');
      
      result[key] = shouldUseVh ? px2vh(value) : px2vw(value);
    } else {
      result[key] = value;
    }
  }
  
  return result;
};
